<template>
  <div class="main_pass main_bg">
    <div class="tit tac bg-fff container">{{$t('merchantex.passwd_set_jymm')}}</div>
    <div class="container">
      <div class="str c-red tac">
        {{tips}}
      </div>
    </div>

    <ul class="line bg-fff">
      <li>
        <div class="name">{{$t('merchantex.passwd_enter_mm')}}</div>
        <div class="val">
          <input type="password"  name=""
                 v-model="password"
                 :placeholder="$t('merchantex.asset_placeholder')"
                 @input="preventPoint($event)"
                 maxlength="16"
          >
        </div>
      </li>
      <li>
        <div class="name">{{$t('merchantex.passwd_confirm_mm')}}</div>
        <div class="val">
          <input type="password"
                 v-model="password2"
                 name="" :placeholder="$t('merchantex.asset_placeholder')"
                 @input="preventPoint2($event)"
                 maxlength="16"
          >
        </div>
      </li>
    </ul>

    <div class="container">
      <button class="btn" :class="{on:!is_btn}" @click="handleSubmit()">{{btn}}</button>
    </div>


  </div>
</template>
<script>
  import { mapActions } from "vuex";
export default {
  props: {
    title: {
      type: String,
      default: function(){
        return this.$t('merchantex.passwd_set_jymm');
      },
    },
    code: {
      type: String,
      default: "", //验证码
    },
    mobileCode: {
      type: String,
      default: "", //手机区号
    },
    target: {
      type: String,
      default: "", //目标(商家手机)
    },
    btn: {
      type: String,
      default: function (){
        return this.$t('merchantex.openstore_ok');
      },
    },
  },
  data() {
    return {
      isCodePass: false,
      password: "",
      password2: "",
      tips:this.$t('merchantex.passwd_tip_safe'),
      is_btn:false,
    };
  },

  created() {
    //this.title = this.$t('merchantex.passwd_set_jymm');
    //this.btn = this.$t('merchantex.openstore_ok');
  },
  methods: {
    ...mapActions(["Get_userData"]),
    passWd(el){
      this.$nextTick(() => {
        let Aval = el
        if(!Aval){
          //this.tips = "密码不能为空";
          this.tips = this.$t('merchantex.passwd_tip1');
          this.is_btn = false;
          return ;
        }
        if(this.common.checkPasslevel(Aval, 8) < 2){
          //this.tips = "密码必须包含字母、数字、特殊字符的两种";
          this.tips = this.$t('merchantex.asset_placeholder');
          this.is_btn = false;
          return ;
        }
        if(!this.password){
          this.is_btn = false;
          return ;
        }
        if(!this.password2){
          this.is_btn = false;
          return ;
        }
        if(this.password != this.password2){
          //this.tips = "两次密码不一致"
          this.tips = this.$t('merchantex.asset_toast_tip5');
          this.is_btn = false;
          return ;
        }else{
          //this.tips = "设置正确";
          this.tips = this.$t('merchantex.passwd_set_sure');
          this.is_btn = true

        }
        //禁止中文
        // if(Aval !== null){
        //   Aval = Aval.replace(/[\u4E00-\u9FA5]/g,'')
        // }

      })
    },
    preventPoint(){
      this.passWd(this.password)
    },
    preventPoint2(){
      this.passWd(this.password2)

    },
    handleSubmit() {
      this.Get_userData();
      if(!this.is_btn){
        return
      }
      let data = {
        password: this.$md5(this.password),
        confirmPassword: this.$md5(this.password2),
        mobileCode:this.mobileCode,
        code:this.code,
        target:this.target
      };
      this.$post(this.URL.mearchant_all.set_Password, data).then(res => {
        if (res.code == 0) {
          this.$toast(res.data);

        }else{
          this.$toast(res.message);
        }
      });
      this.$emit("callback", data);
    },
  },
};
</script>
<style lang="less" scoped>
#app {
  .tit {
    height: 1rem;
    line-height: 1rem;
    font-size: .3rem;
    font-weight: 400;
    color: #14191f;
  }
  .str {
    font-weight: 400;
    color: #f53831;
    line-height: .42rem;
    margin: .36rem 0;
  }
  .btn.on {
    background: #ccc;
  }
  .line {
    padding: 0 .3rem;
    margin-bottom: .4rem;
    li {
      border-bottom: .02rem solid #f4f5f9;
      padding: .3rem 0 .28rem 0;
    }
    .name {
      font-weight: 500;
      color: #272828;
      line-height: .42rem;
    }
    .val {
      input {
        height: .6rem;
        font-size: .3rem;
        width: 100%;border:0
      }
    }
  }
}
</style>
